import { WeaBrowser } from 'ecCom';

import { isArray } from 'lodash';
import { toJS } from 'mobx';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { downPngImg, delPngImg, requiredPngImg } from '.';

export default class WeaCityPickerCellType extends GC.Spread.Sheets.CellTypes.Base {
    typeName = 'WeaCityPickerCellType';
    fieldType;
    browserType;
    browserTitile;
    dataParams = {};
    tabs = [];
    browserInstance;
    viewAttr = 2;
    label;
    open = false;
    width;
    ctx;
    x;
    y;
    w;
    h;
    clickwidth;
    paint(ctx, value, x, y, w, h, style, context) {
        if (!ctx) {
            return;
        }
        this.ctx = ctx;
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        if (this.viewAttr == 1) {
            super.paint(ctx, value, x, y, w, h, style, context);
        } else if(this.viewAttr == 3) {
            super.paint(ctx, value, x, y, w - 20, h, style, context);
            super.paint(ctx, '', x + w - 20, y, 20, h, style, context);
            const width = Math.min(16, h);
            if (value && value[0] && value[0].name) {
                this.clickwidth = 20;
                ctx.drawImage(downPngImg, x + w - this.clickwidth, y + (h - width) / 2, width, width);
                const textwidth = parseInt(ctx.measureText(value[0].name).width.toString()) + 3;
                // 避免越界
                if (textwidth <= (w - 20 - 8)) {

                    this.initDelBtn(textwidth);
                }
            } else {
                this.clickwidth = 20 + 9;
                ctx.drawImage(downPngImg, x + w - this.clickwidth, y + (h - width) / 2, width, width);
                ctx.drawImage(requiredPngImg, x + w - 8, y + (h - 7) / 2, 7, 7);
            }

        } else {
            super.paint(ctx, value, x, y, w - 20, h, style, context);
            super.paint(ctx, '', x + w - 20, y, 20, h, style, context);
            const width = Math.min(16, h);
            
            this.clickwidth = 20;
            ctx.drawImage(downPngImg, x + w - this.clickwidth, y + (h - width) / 2, width, width);
            if (value && value[0] && value[0].name) {
                const textwidth = parseInt(ctx.measureText(value[0].name).width.toString()) + 3;
                // 避免越界
                if (textwidth <= (w - 20 - 8)) {

                    this.initDelBtn(textwidth);
                }
            }
        }
    }
    format(value, format, formattedData, context) {
        if (isArray(value)) {
            return value.filter(d => typeof d !== 'function').map(d => d.names || d.name).join(',');
        } else {
            return '';
        }
    }
    fromJSON(setting) {
        this.fieldType = toJS(setting.fieldType);
        this.viewAttr = setting.viewAttr;
        this.label = setting.label;
        this.browserType = this.fieldType[1].value;
        if (this.fieldType.length == 2) {
            this.browserTitile = this.fieldType[1].valueSpan;
        } else {
            this.browserTitile = this.fieldType[1]["valueObj"][0].name;
        }
    }
    getHitInfo(x, y, cellStyle, cellRect, context) {
        const { row, col, sheetArea, sheet } = context;
        return {
            x,
            y,
            row,
            col,
            cellRect,
            sheetArea,
            sheet,
        };
    }
    processMouseUp(hitInfo) {
        const { x, y, cellRect, sheet, row, col, sheetArea, reservedLocation, isReservedLocation } = hitInfo;
        
        const value = sheet.getCell(row, col).value();
        let cwidth = 20;
        if(this.viewAttr == 3 && !(value && value[0] && value[0].name)) {
            cwidth = 29;
        }
        console.log(cwidth)
        if (x && cellRect) {
            if (this.viewAttr !== 1 && x >= (cellRect.x + cellRect.width - cwidth)) {
                this.showBrowserModal(sheet.getCell(row, col, sheetArea), cellRect);
            } else if (this.viewAttr !== 1 && this.ctx) {
                if (!value) {
                    return true;
                }
                const width = parseInt(this.ctx.measureText(value[0].name).width.toString()) + 3;
                if (width && x >= (cellRect.x + width) && x <= (cellRect.x + width + 12)) {
                    sheet.getCell(row, col).value("");
                }
                return true;
            }
        }
        return super.processMouseUp(hitInfo);
    }

    showBrowserModal(context, cellRect) {
        const { sheet, row, col } = context;
        this.open = true;
        if (!this.editor) {
            this.editor = document.createElement('div');
            const host = sheet.getParent().getHost();
            host.appendChild(this.editor);
            this.editor.style.visibility = 'hidden';
            this.mask = document.createElement('div');
            document.body.appendChild(this.mask);
            $(this.mask).css({
                position: 'absolute',
                left: 0,
                top: 0,
                width: '100%',
                height: '100%',
                display: 'none'
            });
            const hideModal = (e) => {
                if (this.browserInstance && this.browserInstance.browser) {
                    window.citypicker = this.browserInstance.browser;
                    $(this.mask).hide();
                    this.browserInstance.browser.alertModel();
                } else {
                    setTimeout(() => {
                        hideModal();
                    }, 50);
                }
            }
            this.mask.addEventListener('click', hideModal);
        }
        $(this.editor).css({
            position: 'absolute',
            left: cellRect.x,
            top: cellRect.y,
            width: cellRect.width,
            height: cellRect.height,
        });
        const replaceDatas = context.value();

        const changeValue = (newValue, valueSpan, valueObj) => {
            this.open = false;
            $(this.mask).hide();
            sheet.getCell(row, col).value(valueObj.map(d => ({ id: d.id, name: d.name })));
            const value = sheet.getCell(row, col).value();
            //this.initDelBtn(value.length * 20 + 2);
        }
        ReactDOM.render(<div className="edc-city-picker-container">
            <div className="edc-city-picker-mask" />
            <WeaBrowser
                ref={(ref) => this.browserInstance = ref}
                onChange={changeValue}
                replaceDatas={replaceDatas || []}
                memorise={true}
                type={this.browserType}
                title={this.browserTitile}
                iconBgcolor={"#217346"}
            />
        </div>, this.editor);
        const openModal = () => {
            if (this.browserInstance && this.browserInstance.browser) {
                window.citypicker = this.browserInstance.browser;
                $(this.mask).show();
                this.browserInstance.browser.alertModel();
            } else {
                setTimeout(() => {
                    openModal();
                }, 50);
            }
        }
        openModal();
    }

    initDelBtn(width) {
        this.width = width;
        if (this.ctx) {

            this.ctx.drawImage(delPngImg, this.x + width, this.y + (this.h - 10) / 2, 12, 12);
        }
    }
}